<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p>count:{{count}}</p>
            <p>doubleCount:{{doubleCount}}</p>
            <p>countAlias:{{countAlias}}</p>
            <p>countPlusLocalCount:{{countPlusLocalCount}}</p>
        </div>
        <script src="vue.js"></script>
        <script src="my-vuex.js"></script>
        <script>
        //使用Vuex插件
        Vue.use(Vuex);
        //创建一个 Vuex仓库
        const store = new Vuex.Store({
            state:{count:1},//定义仓库中的初始状态
        });
        var vm = new Vue({
            el:'#app',
            data:{localCount:100},
            //提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
            store,//store选项
            computed:{
                //本地的计算属性
                doubleCount(){
                    return this.count*2;
                },
                ///从仓库中映射出来的计算属性进行合成一个大的计算属性对象
                ...Vuex.mapState({
                count:state=>state.count,
                countAlias:'count',
                countPlusLocalCount(state){
                    return state.count+ this.localCount;
                }
            })
            } 
            //computed:Vuex.mapState(['count'])
        });
    </script>
    </body>
</html>